import React, { Component } from 'react'
import DataHoc from "../template/data-hoc";
import AdvancedTable from "components/advanced-table";
import { messages } from "share/common";
import httpFetch from "share/httpFetch";
import { Button, Dropdown } from "antd";
import CancelModal from "../template/cancel-modal";
import Importer from "components/template/importer/index";

@DataHoc
class PayInProcess extends Component {

  key = 'pay_in_process';

  componentDidMount() {
    const search = this.advancedTableRef.advancedSearchRef;
    search.props.form.setFieldsValue(this.props.searchParams);
    this.setState({ status: this.props.searchParams.documentCategory }, () => {
      search.search();
      this.setState({ searchForm: this.props.getSearchForm(this.key, this.props.searchParams.documentCategory) })
    });
  }

  componentWillReceiveProps = nextProps => {
    if (nextProps.nowStatus !== this.props.nowStatus && nextProps.nowStatus === 'WaitForPay') {
      const search = this.advancedTableRef.advancedSearchRef;
      search.props.form.setFieldsValue(nextProps.searchParams);
      this.setState({ status: nextProps.searchParams.documentCategory }, () => {
        search.search();
        this.setState({ searchForm: this.props.getSearchForm(this.key, nextProps.searchParams.documentCategory) })
      });
    }
  };

  state = {
    searchForm: this.props.getSearchForm(this.key, 'EXP_REPORT'),
    status: 'EXP_REPORT',
    sortDTOs: [],
    rowSelection: this.props.getSelection(),
    selectedData: [],
    confirmLoading: false,
    cancelLoading: false,
    cancelPayModal: false,
    params: {},
    modelEnum: 'CURRENT_PAGE'
  };

  handleChangeStatus = value => {
    this.setState({ searchForm: this.props.getSearchForm(this.key, value), status: value }, this.props.handleChangeStatus);
  };

  service = (page, size, searchParams) => {
    const { status, sortDTOs } = this.state;
    let url = status === 'EXP_REPORT' ? '/api/payment/schedule/query/pending/pay' : '/api/loan/line/query/pending/pay';
    return httpFetch.post(url, { page, size, ...searchParams, sortDTOs })
  };

  importOfferFile = () => {
    this.advancedTableRef.getList();
  };

  onOk = () => {
    this.setState({ cancelPayModal: false });
    this.props.clearRowSelection();
    this.advancedTableRef.getList();
  };

  handleConfirm = () => {
    const { selectedData, modelEnum } = this.state;
    this.props.handleConfirm(this.key, this.advancedTableRef.state.searchParams, selectedData, modelEnum);
  };

  render() {
    const { searchForm, rowSelection, selectedData, confirmLoading, cancelLoading, status, cancelPayModal, params,
      modelEnum } = this.state;
    const { getColumns, handleTableChange, renderAllExpandedRow, handleRowClick, getTotalAmount, handleCancelPay,
      renderDropDown, onGetData, clearRowSelection, judgePage } = this.props;
    return(
      <div style={{ height: '100%' }}>
        <AdvancedTable
          title={messages('finance-4.key317')/*待付款*/}
          tableName='pay_in_process'
          service={this.service}
          searchForm={searchForm}
          rowKey="id"
          onRef={ref => this.advancedTableRef = ref}
          index
          onRow={ record => ({ onClick: () => handleRowClick(record, status) })}
          rowSelection={rowSelection}
          columns={getColumns(this.key)}
          onGetData={onGetData}
          expandedRowRender={renderAllExpandedRow}
          onChange={handleTableChange}
          onSearch={clearRowSelection}
          notLoadWhenMount
          onReset={() => this.setState({ status: 'EXP_REPORT' })}
          footer={
            <div style={{ marginLeft: '-20px' }}>
              {
                selectedData.length > 0 && judgePage() && <span>
                  &nbsp;,&nbsp;{ messages('finance-4.key335')/*合计金额*/ }&nbsp;&nbsp;
                  { getTotalAmount(selectedData) }
                </span>
              }
              <span style={{ marginLeft: '20px' }}>
                {
                  <Dropdown overlay={renderDropDown()} placement="bottomCenter">
                    <Button>{judgePage() ? messages('finance-4.key332')/*全选当页*/ : messages('finance-4.key333')/*全选全部*/}</Button>
                  </Dropdown>
                }
                <Button
                  type="primary"
                  disabled={rowSelection.selectedRowKeys.length === 0}
                  loading={confirmLoading}
                  onClick={this.handleConfirm}
                  style={{ margin: '0px 8px' }}
                >
                  {messages('finance-4.key337')/*确认已付款*/}
                </Button>
                <Importer
                  infoMessage={messages('finance-4.key133')/*为保证导入结果正确，请不要修改下载的报盘文件的文件名*/}
                  title={messages('finance-4.key338')/*报盘导入*/}
                  btnName={messages('finance-4.key338')/*报盘导入*/}
                  btnProps={{type: 'default'}}
                  modalOptions={{wrapClassName: 'pay_in_process'}}
                  onOK={this.importOfferFile}
                  template={<span/>}
                  uploadOptions={{uploadUrl: `/api/reimbursement/batch/paid/confirm/by/document`}}
                  parseUploadResult={uploadResult => messages('finance-4.key128',{arg1: uploadResult.successEntities||0,arg2: uploadResult.failureEntities||0})/*支付成功：{arg1}条，支付失败：{arg2}条*/}
                />
                {
                  (this.checkFunctionProfiles(['finance.payment.cancel'], [true]) && status === 'EXP_REPORT') &&
                  <Button
                    type="default"
                    disabled={rowSelection.selectedRowKeys.length === 0}
                    loading={cancelLoading}
                    style={{ marginLeft: '8px' }}
                    onClick={() => {handleCancelPay(this.key, this.advancedTableRef.state.searchParams, selectedData, modelEnum)}}
                  >
                    {messages('finance-4.key93')/*取消支付*/}
                  </Button>
                }
              </span>
            </div>
          }
          renderSelectedNumber={ () => (
            <span>
              {messages('finance-4.key290')/*已选择*/}
              <span className='advanced-table-footer-selected-number'>
                { judgePage() ? selectedData.length :
                  this.advancedTableRef.state.pagination.total - selectedData.length }
              </span>
              {messages('finance-4.key334')/*条*/}
            </span>
          )}
        />
        <CancelModal
          visible={cancelPayModal}
          onOk={this.onOk}
          onCancel={() => this.setState({ cancelPayModal: false })}
          params={params}
          key={this.key}
        />
      </div>
    )
  }

}

export default PayInProcess
